<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录注册</title>
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/css/login/styles-login.css?v=1.01234">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login/jigsaw.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login/demo.css"/>
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">


    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login/component.css"/>
    <style>

        #msg {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
        }

        /*model*/
        #Modal1 {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0);
        }

        .pop_box {
            min-width: 230px;
            min-height: 350px;
            width: 18%;
            height: 40%;
            z-index: 1;
            margin: 12% auto;
            overflow: auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 10px 10px 5px #888888;
        }

        .middle-md {
            margin: auto;
            height: 53%;
            padding: 0 20px;
            color: black;
        }
        .middle-md p{
            font-size: 10px;
        }

        .middle-md a{
            font-size: 10px;
            color: blue;
        }

        .head {
            padding: 5px;
        }
        .foot {
            padding: 5px 0;
            text-align: center;
            color: black;
            margin-bottom: 6px;
        }

        h5 {
            margin: 0 0px;
            padding-top: 15px;
        }

    </style>
</head>
<body>

<div class=" demo-2">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas style="float: left;z-index: -1;" id="demo-canvas"></canvas>
            <div>
                <div class="login-wrap">
                    <div class="login-html">
                        <input id="tab-1" type="radio" name="tab" class="sign-in"><label for="tab-1"
                                                                                         class="tab">登录</label>
                        <input id="tab-2" type="radio" name="tab" class="sign-up" checked><label for="tab-2"
                                                                                                 class="tab">注册</label>
                        <div class="login-form">
                            <form>
                                <div class="sign-up-htm">
                                    <div class="group">
                                        <label for="register-username" class="label">用户名</label>
                                        <input id="register-username" type="text" class="input" onblur="checkName()">
                                        <span class="checkmsg checkname"><i class="fa fa-exclamation-circle"></i></span>
                                    </div>
                                    <div class="group">
                                        <label for="register-pass" class="label">密码</label>
                                        <input id="register-pass" type="password" class="input" data-type="password"
                                               size="16" onblur="checkpass()">
                                        <span class="checkmsg checkpass"><i class="fa fa-exclamation-circle"></i></span>
                                    </div>
                                    <div class="group">
                                        <label for="register-pass2" class="label">重复密码</label>
                                        <input id="register-pass2" type="password" class="input" data-type="password"
                                               size="16" onblur="confirmPass()">
                                        <span class="checkmsg confimpass"><i
                                                class="fa fa-exclamation-circle"></i></span>
                                    </div>
                                    <div class="group">
                                        <label for="inlineRadio1" class="label">性别</label>
                                        <div class="">
                                            <label class="radio-inline">
                                                <input type="radio" name="sex" id="inlineRadio1" value="男" checked> 男
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="sex" id="inlineRadio2" value="女"> 女
                                            </label>
                                        </div>
                                    </div>
                                    <div class="group">
                                        <label for="phone" class="label">手机号码</label>
                                        <input id="phone" type="text" class="input">
                                        <span class="checkmsg checkphone"><i
                                                class="fa fa-exclamation-circle"></i></span>
                                    </div>
                                    <div style="position: relative;" class="group">
                                        <label for="code" class="label">验证码</label>
                                        <input style="width: 50%" id="code" type="text" size="6" class="input">
                                        <input id="phonetime" onclick="getPhoneCode()" type="button" class="button code"
                                               value="发送验证码">
                                    </div>
                                    <div class="group">
                                        <a id="register" href="#"><input type="button" class="button" value="注册"
                                                                         onclick="register()"></a>
                                    </div>
                                    <div style="margin-top: 10px;" class="hr"></div>
                                    <div class="foot-lnk">
                                        <a for="#tab-1">已是成员?</a>
                                    </div>
                                </div>
                            </form>
                            <form>
                                <div class="sign-in-htm">
                                    <div class="group">
                                        <label for="username" class="label">用户名</label>
                                        <input id="username" name="username" value="" type="text"
                                               class="input" placeholder="请输入用户名" autocomplete="off">
                                    </div>
                                    <div class="group" style="margin-bottom: 50px;">
                                        <label for="password" class="label">密码</label>
                                        <input id="password" type="password" value=""
                                               class="input" data-type="password" placeholder="请输入密码"
                                               autocomplete="off">
                                    </div>
                                    <div class="group">
                                        <div class="">
                                            <div id="captcha" style="position: relative" data-type="password"></div>
                                            <div id="msg"></div>
                                        </div>
                                    </div>
                                    <div class="group">
                                        <input id="check" type="checkbox" class="check">
                                        <label for="check"><span class="icon"></span> 保持登录</label>
                                    </div>
                                    <div class="group">
                                        <input type="button" class="button" value="登录" onClick="sub()">
                                    </div>
                                    <div id="warn"></div>
                                    <div style="margin-top: 10px;" class="hr"></div>
                                    <div class="foot-lnk">
                                        <a href="#forgot">忘记密码?</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div><!-- /container -->
<div id="Modal1" style="z-index: 99" class=" back">
    <div class="pop_box content">
        <div class="head">
            <span style="display: block;float: right;right: 4px;top: 4px;" onclick="closeModal()">
                <a href="#">X</a>
            </span>
            <h5>登录错误</h5>
        </div>
        <hr>
        <div class="middle-md">
            <p>你输入的账户名或密码不正确，原因可能是：</p>
            <p>1、账号名输入有误；</p>
            <p>2、忘记密码；</p>
            <p>3、未区分字母大小写；</p>
            <p>4、未开启小键盘；</p>
            <br>
            <p>如果你的密码丢失或遗忘，可选择 <a href="#">找回密码</a>。</p>
        </div>
        <hr>
        <div class="foot">
            <input type="button" value="确定" class=" btn btn-default btn-sm" onclick="closeModal()" style="position:relative;left: 115px;">
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>

<script src="${pageContext.request.contextPath}/static/js/user/login/rAF.js"></script>
<script src="${pageContext.request.contextPath}/static/js/user/login/demo-2.js"></script>


<!--== Product Quick View Modal Area End ==-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/js/user/login/jigsaw.js?"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js?"></script>
<script src="${pageContext.request.contextPath}/static/js/user/login/login.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/md5.js"></script>
</body>
</html>
